<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1.控制字体：字体家族属性 */
			{
				/* font-family指定字体，常用：微软雅黑、宋体.. */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑端可能不存在指定字体，按照顺序在指定一个字体，如果存在选定字体
				 sans-serif 无衬线字体，理解：黑体
				 */
				/* 字体尺寸属性  px单位：绝对值
				                em单位：相对于父元素字体大小 倍数【移动端】
				 */
				font-size: 1.5em;
				/* 字体加粗属性：属性值【数值范围：100~900】  400等于normal
				               属性值【英文：normal、bold】 900等于bold
				 */
				font-weight: bold;
				/* 字体样式属性 italic倾斜 */ 
				font-style: italic; 
				/* 文本转换属性 uppercase转大写、lowercase转小写 、capitalize将单词首字母转为大写*/
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				/* 首行缩进属性 */
				text-indent: 200px;
			}
			/* 2.控制文本属性 */
			h1+p{
				b order: 1px solid red;
				/* text-align文本对齐属性：left\right\center[具备宽度空间]
				                          justify【文本内容足够，两端对齐】 */
				text-align: justify;
				/* line-height行高属性：数值px 主要功能：文本垂直居中，高度与行高一致 */
				height: 40px;
				line-height: 30px;
				/* letter-spacing:【正负】数值px  设置字符的间距 */
				letter-spacing: 1px;
				/* word-spacing: [正负] 数值px  设置单词的间距 */
				word-spacing: 10px;
			}
			/* 3.文本装饰效果属性 */
			div a{
				border: 1px solid #ccc;
				padding: 8px;
				margin-left: 5px;
			}
			div a.current{/* 加权重 */
				border: 0;
				color: #000;
				/* text-decoration超文本装饰属性：none 去掉下划线
				                                underline 默认 自带下划线
												line-through 删除线
				 */
				text-decoration: none;
			}
			div p{
				/* 文本阴影属性：【阴影分三种：过滤、下阴影|文本阴影|盒子阴影】 */
				/*            X  Y  模糊程度  颜色 */
				text-shadow: 5px 5px 10px #ffaaff;
			}
			/* 4.处理文本溢出属性 */
			div>span{
				/* white-space文本换行属性：nowrap 不换行
				                           pre   保留空格与换行
										   normal默认，空格合并，自动换行，回车不管
				*/
				border: 1px solid red;
				white-space: nowrap;
				white-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上文本或者字体 
		4种用途 ①控制字体：font-famliy、font-size、font-weight等
		        ②控制文本布局：text-align、line-height、letter-spacing等
				③文本装饰效果：text-decoration、text-shadow等
				④处理文本溢出：overflow、white-space等
		-->
		<h1>控制字体属性：font-family、font-size</h1>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga eveniet quidem doloremque dolores. Ipsa similique aliquid odio voluptate soluta? Ipsa itaque sit porro fuga velit qui provident quia consectetur labore!
		<h1>控制文本布局：text-align、line-height</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid minima labore necessitatibus iste aspernatur placeat, odit qui animi esse molestias quibusdam optio, corrupti assumenda voluptatibus non adipisci recusandae. Provident, eius.</p>
		<h1>文本装饰效果</h1>
		<div>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<p>文本阴影效果</p>
			</div>
			<h1>处理文本溢出与换行</h1>
			<div>
				<span>L 
				   orem ipsum dolor sit amet consectetur adipisicing elit. Explicabo odio aliquam dolorum dicta rerum sed modi. Soluta eius, molestias aliquam esse, sit at a commodi deleniti, provident tempora temporibus animi!
				</span>
				</div>
	</body>
</html>